<template>
  <v-card title="隐藏部分列">
    <div class="mb-30">
      <v-alert type="info" class="mb-10">
        <div slot="message">
          <div>
            设置列的
            <span class="blue-text"> visible、defaultVisible </span>
            为 false 就隐藏，最后调用
            <span class="blue-text"> refreshColumn </span> 刷新列方法
          </div>
        </div>
      </v-alert>
      <div class="mb-5">
        <v-button-group>
          <v-button @click="$refs.xTable.showColumnModal()">列选择</v-button>
          <v-button @click="$refs.xTable.showFilterModal()">过 滤</v-button>
          <v-button @click="$refs.xTable.operateRestore()">还 原</v-button>
        </v-button-group>
      </div>
      <vcu-table
        ref="xTable"
        :loadOptions="options"
        max-height="200"
        customModalShow
        filterModalShow
        :filterFormData="filterFormData"
        @onHeaderLoad="onHeaderLoad"
      >
      </vcu-table>
    </div>
  </v-card>
</template>
<script>
import XEUtils from "xe-utils";
export default {
  data() {
    return {
      options: {
        headUrl: "dataq/api/bigDataHeader",
        pageUrl: "dataq/api/bigDataPage",
        seq: true,
      },
      filterFormData: {
        filterFindUrl: "getInHospPatientList4cy",
        operationUrl: "dataq/api/dict/operation", //正式环境不需要
        relationUrl: "dataq/api/dict/relation", //正式环境不需要
        filterFindFormData: {
          deptNo: "14",
        },
      },
      textSys: 1,
    };
  },
  mounted() {},
  methods: {
    onHeaderLoad(columns) {
      const { collectColumn } = this.$refs.xTable.getTableColumn();
      XEUtils.arrayEach(collectColumn, (item) => {
        if (item.key == "inHospWardName" && this.textSys == 1) {
          item.visible = false; //是否可见
          item.defaultVisible = false;
        }
      });
      //刷新
      this.$refs.xTable.refreshColumn();
    },
  },
};
</script>